<template>  
  <view class="container">
    <view class="user-section">
      <image
        class="bg"
        src="/static/user-bg.jpg"
      />
      <view class="user-info-box">
        <view class="portrait-box">
          <image
            class="portrait"
            :src="userInfo.avatarUrl || '/static/missing-face.png'"
          />
        </view>
        <view class="info-box">
          <text v-if="hasLogin" class="username">
            {{ userInfo.nickName}}
          </text>
          <text v-else class="login" @click="showLogin" >登录</text>
        </view>
      </view>
    </view>
		
    <view 
      class="cover-container"
      :style="[{
        transform: coverTransform,
        transition: coverTransition
      }]"
      @touchstart="coverTouchstart"
      @touchmove="coverTouchmove"
      @touchend="coverTouchend"
    >
      <image
        class="arc"
        src="/static/arc.png"
      />
			
      <!-- 订单 -->
      <view class="order-section">
        <view class="sec-header">
          <text>我的订单</text>
          <view class="order-list-all" @click="navTo('/pages/order/order?state=0')">
            <text>全部</text>
            <text class="yticon icon-you" />
          </view>
          
        </view>
        <view class="order-list">
          <view
            class="order-item"
            hover-class="common-hover"
            :hover-stay-time="50"
            @click="navTo('/pages/order/order?state=1')"
          >
            <text class="yticon icon-shouye" />
            <text class="notice-wrapper">
              待付款
              <text v-if="serviceOrders" class="notice">{{serviceOrders}}</text>
            </text>
          </view>
          <view
            class="order-item"
            hover-class="common-hover"
            :hover-stay-time="50"
            @click="navTo('/pages/order/order?state=2')"
          >
            <text class="yticon icon-daifukuan" />
            <text class="notice-wrapper">
              服务中
              <text v-if="notPayOrders" class="notice">{{notPayOrders}}</text>
            </text>
          </view>
          <!-- <view
            class="order-item"
            hover-class="common-hover"
            :hover-stay-time="50"
            @click="navTo('/pages/order/order?state=3')"
          >
            <text class="yticon icon-yishouhuo" />
            <text>待评价</text>
          </view> -->
          <view
            class="order-item"
            hover-class="common-hover"
            :hover-stay-time="50"
            @click="navTo('/pages/order/order?state=4')"
          >
            <text class="yticon icon-shouhoutuikuan" />
            <text>已完成</text>
          </view>
        </view>
        

      </view>
      <!-- 送奶日历 -->
      <view v-if="hasLogin && deliveryItemList.length > 0" class="deliver-section">
        <view class="sec-header">
          <text>送奶日历</text>
          <view class="order-list-all" @click="navTo('/pages/deliver/deliver?type=2&deliveryDate=' + deliveryDate)">
            <text>查看</text>
            <text class="yticon icon-you" />
          </view>
        </view>
        <view class="deliver-list">
          <view class="left">
            <view class="deliver-list-item" v-for="(item, index) in deliveryItemList" :key="index">
              <image :src="item.goodImg"></image>
              <text class="clamp">{{item.goodName}}</text>
            </view>
            <text v-if="deliveryList.length >= 3" class="more">...</text>
          </view>
          <view class="right">
            <view class="latest-deliver">
              <text>最近配送：</text>
              <text>{{formatDate}} 星期{{deliverDay}}</text>
            </view>
            <view class="deliver-status">
              {{deliveryStatus === 1 ? '待配送' : '已配送'}}
            </view>
          </view>
        </view>
        

      </view>
      <!-- 我的服务 -->
      <view class="history-section icon">
        <view class="sec-header">
          <text>我的服务</text>
        </view>
        <list-cell
          icon="icon-dizhi"
          icon-color="#5fcda2"
          title="地址管理"
          @eventClick="navTo('/pages/address/address')"
        />
        <list-cell
          icon="icon-tuandui"
          icon-color="#54b4ef"
          title="在线客服"
          @eventClick="service"
        />
        <!-- <list-cell
          icon="icon-shouye"
          icon-color="#54b4ef"
          title="关于"
        /> -->
        <!-- <list-cell
          icon="icon-shezhi1"
          icon-color="#e07472"
          title="设置"
          border=""
          @eventClick="navTo('/pages/set/set')"
        /> -->
      </view>
    </view>
    <login-modal />
  </view>  
</template>  
<script>  
import listCell from '@/components/mix-list-cell'
import loginModal from '@/components/loginModal.vue'

import { parseTime } from '@/utils/index.js'

import {  
  mapState, mapMutations
} from 'vuex'  
let startY = 0; let moveY = 0; const pageAtTop = true
export default {
  components: {
    listCell,
    loginModal
  },
  data() {
    return {
      coverTransform: 'translateY(0px)',
      coverTransition: '0s',
      moving: false,
      // 最近配送方式
      deliveryStatus: 1,
      deliveryDate: '',
      // 服务中订单的数量
      serviceOrders: 0,
      // 待付款订单的数量
      notPayOrders: 0,
      deliveryList: [
        // {
        //   goodImg: '/static/errorImage.jpg',
        //   goodName: '优麦500ml'
        // },
      ]
    }
  },
  async onLoad() {
    this.getOrderCalendar()
  },
  onShow() {
    this.getOrderCalendar()
  },
  computed: {
    ...mapState(['hasLogin','userInfo', 'showLoginModal']),
    // 最近配送星期
    deliverDay() {
      return parseTime(this.deliveryDate, '{a}')
    },
    formatDate() {
      let selectedDate = this.deliveryDate
      selectedDate = selectedDate.slice(5)
      return selectedDate
    },
    // 展示的图片
    deliveryItemList() {
      const deliveryItemList = this.deliveryList.deliveryInfoList || []
      return deliveryItemList.slice(0, 2)
    }
  },
  methods: {
    ...mapMutations(['showLogin']),
    // 获取送奶日历
    async getOrderCalendar() {
      try {
        const res = await this.$api.json('getUserInfoData', {
          openId: this.userInfo.openId,
          deliveryTime: parseTime(Date.now(), '{y}-{m}-{d}')
        })
        // console.log('res', res)
        this.deliveryDate = res.lastDeliveryTime
        this.deliveryStatus = res.lastDeliveryStatus
        this.deliveryList = res
        this.serviceOrders = res.serviceOrders
        this.notPayOrders = res.notPayOrders
      } catch (error) {
        console.log(error)
      }
    },
    /**
     * 统一跳转接口,拦截未登录路由
     * navigator标签现在默认没有转场动画，所以用view
     */
    navTo(url){
      if(!this.hasLogin){
        this.showLogin()
        return
      }
      uni.navigateTo({  
        url
      })  
    }, 
    service() {
      uni.makePhoneCall({
        phoneNumber: '4006188888'
      })
    },

    /**
     *  会员卡下拉和回弹
     *  1.关闭bounce避免ios端下拉冲突
     *  2.由于touchmove事件的缺陷（小程序会出现，比如20跳到40，h5反而好很多），下拉的时候会有掉帧的感觉
     *    transition设置0.1秒延迟，让css来过渡这段空窗期
     *  3.回弹效果可修改曲线值来调整效果，一个好用的bezier生成工具 http://cubic-bezier.com/
     */
    coverTouchstart(e){
      if(pageAtTop === false){
        return
      }
      this.coverTransition = 'transform .1s linear'
      startY = e.touches[0].clientY
    },
    coverTouchmove(e){
      moveY = e.touches[0].clientY
      let moveDistance = moveY - startY
      if(moveDistance < 0){
        this.moving = false
        return
      }
      this.moving = true
      if(moveDistance >= 80 && moveDistance < 100){
        moveDistance = 80
      }
		
      if(moveDistance > 0 && moveDistance <= 80){
        this.coverTransform = `translateY(${moveDistance}px)`
      }
    },
    coverTouchend(){
      if(this.moving === false){
        return
      }
      this.moving = false
      this.coverTransition = 'transform 0.3s cubic-bezier(.21,1.93,.53,.64)'
      this.coverTransform = 'translateY(0px)'
    }
  }  
}  
</script>  
<style lang='scss'>
	%flex-center {
    display:flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
	}
	%section {
    display:flex;
    justify-content: space-around;
    align-content: center;
    background: #fff;
    border-radius: 10rpx;
	}

	.user-section{
		height: 520rpx;
		padding: 100rpx 30rpx 0;
		position:relative;
		.bg{
			position:absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			filter: blur(1px);
			opacity: .7;
		}
	}
	.user-info-box{
		height: 180rpx;
		display:flex;
		align-items:center;
		position:relative;
		z-index: 1;
		.portrait{
			width: 130rpx;
			height: 130rpx;
			border:5rpx solid #fff;
			border-radius: 50%;
		}
		.username{
			font-size: $font-lg + 6rpx;
			color: $font-color-dark;
			margin-left: 20rpx;
    }
	}

	.vip-card-box{
		display:flex;
		flex-direction: column;
		color: #f7d680;
		height: 240rpx;
		background: linear-gradient(left, rgba(0,0,0,.7), rgba(0,0,0,.8));
		border-radius: 16rpx 16rpx 0 0;
		overflow: hidden;
		position: relative;
		padding: 20rpx 24rpx;
		.card-bg{
			position:absolute;
			top: 20rpx;
			right: 0;
			width: 380rpx;
			height: 260rpx;
		}
		.b-btn{
			position: absolute;
			right: 20rpx;
			top: 16rpx;
			width: 132rpx;
			height: 40rpx;
			text-align: center;
			line-height: 40rpx;
			font-size: 22rpx;
			color: #36343c;
			border-radius: 20px;
			background: linear-gradient(left, #f9e6af, #ffd465);
			z-index: 1;
		}
		.tit{
			font-size: $font-base+2rpx;
			color: #f7d680;
			margin-bottom: 28rpx;
			.yticon{
				color: #f6e5a3;
				margin-right: 16rpx;
			}
		}
		.e-b{
			font-size: $font-sm;
			color: #d8cba9;
			margin-top: 10rpx;
		}
	}
	.cover-container{
		background: $page-color-base;
		margin-top: -150rpx;
		padding: 0 30rpx;
		position:relative;
		background: #f5f5f5;
		padding-bottom: 20rpx;
		.arc{
			position:absolute;
			left: 0;
			top: -34rpx;
			width: 100%;
			height: 36rpx;
		}
	}
	.tj-sction{
		@extend %section;
		.tj-item{
			@extend %flex-center;
			flex-direction: column;
			height: 140rpx;
			font-size: $font-sm;
			color: #75787d;
		}
		.num{
			font-size: $font-lg;
			color: $font-color-dark;
			margin-bottom: 8rpx;
		}
	}
	.order-section{
		@extend %section;
		padding: 28rpx 0;
    margin-top: 20rpx;
    display: flex;
    flex-direction: column;
    .sec-header{
			display:flex;
      align-items: center;
      justify-content: space-between;
			font-size: $font-base;
			color: $font-color-dark;
			line-height: 40rpx;
      margin-left: 30rpx;
      margin-right: 30rpx;
      padding-bottom: 20rpx;
      border-bottom: 1rpx solid #f2f2f2;
			.yticon{
				font-size: 30rpx;
				color: $font-color-base;
				margin-right: 16rpx;
				line-height: 40rpx;
			}
    }
    .order-list-all {
      font-size: $font-base;
    }
		.order-item{
			@extend %flex-center;
			width: 120rpx;
			height: 120rpx;
			border-radius: 10rpx;
			font-size: $font-sm;
      color: $font-color-dark;
      flex: 1;
      position: relative;
      .notice-wrapper {
        position: relative;
      }
      .notice {
        position: absolute;
        background: $base-color;
        border-radius: 50%;
        color: #fff;
        width: 30rpx;
        height: 30rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        right: -10rpx;
        top: -80rpx;
      }
		}
		.yticon{
			font-size: 48rpx;
			margin-bottom: 18rpx;
			color: #fa436a;
		}
		.icon-shouhoutuikuan{
			font-size:44rpx;
		}
  }
  .deliver-section {
    @extend %section;
		padding: 28rpx 0;
    margin-top: 20rpx;
    display: flex;
    flex-direction: column;
    .sec-header{
			display:flex;
      align-items: center;
      justify-content: space-between;
			font-size: $font-base;
			color: $font-color-dark;
			line-height: 40rpx;
      margin-left: 30rpx;
      margin-right: 30rpx;
      padding-bottom: 20rpx;
      border-bottom: 1rpx solid #f2f2f2;
			.yticon{
				font-size: 30rpx;
				color: $font-color-base;
				margin-right: 16rpx;
				line-height: 40rpx;
			}
    }
    .order-list-all {
      font-size: $font-base;
      text-align: right;
    }
    .deliver-list {
      display: flex;
      height: 160rpx;
      padding: 0 30rpx;
      font-size: $font-sm;
      .left, .right {
        flex: 1;
        display: flex;
        image {
          width: 80rpx;
          height: 80rpx;
          margin-bottom: 20rpx;
        }
      }
      .left {
        .deliver-list-item {
          display: flex;
          align-items: center;
          justify-content: center;
          flex-direction: column;
          width: 120rpx;
          height: 160rpx;
          margin-right: 20rpx;
          text {
            width: 120rpx;
          }
        }
        .more {
          height: 160rpx;
          display: flex;
          justify-content: center;
          align-items: center;
        }
      }
      .right {
        flex-direction: column;
        .latest-deliver {
          flex: 1;
          display: flex;
          justify-content: flex-end;
          align-items: center;
          color: $font-color-base;
        }
        .deliver-status {
          display: flex;
          justify-content: flex-end;
          align-items: center;
          flex: 1;
          color: $base-color;
        }
      }
    }
  }
	.history-section{
		padding: 30rpx 0 0;
		margin-top: 20rpx;
		background: #fff;
		border-radius:10rpx;
		.sec-header{
			display:flex;
			align-items: center;
			font-size: $font-base;
			color: $font-color-dark;
			line-height: 40rpx;
      margin-left: 30rpx;
      margin-right: 30rpx;
      padding-bottom: 20rpx;
      border-bottom: 1rpx solid #f2f2f2;
			.yticon{
				font-size: 44rpx;
				color: $font-color-base;
				margin-right: 16rpx;
				line-height: 40rpx;
			}
		}
		.h-list{
			white-space: nowrap;
			padding: 30rpx 30rpx 0;
			image{
				display:inline-block;
				width: 160rpx;
				height: 160rpx;
				margin-right: 20rpx;
				border-radius: 10rpx;
			}
		}
  }
  .order-list {
    display: flex;
  }
	page {
    background-color: #f5f5f5;
  }
</style>
